<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>{phrase var='general.title'} | {phrase var='general.protduct_title'}</title>
        <link rel="icon" href="http://localhost/magento/skin/adminhtml/default/default/favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="http://localhost/magento/skin/adminhtml/default/default/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/default.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/layout.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/menu.css" media="screen, projection" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.treeview.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.theme.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.core.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.datepicker.css" media="all" />

        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.button.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.resizable.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.dialog.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.tooltip.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.override.css" />

        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/jquery.ui.tab.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/vertical-tab.css" media="all" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/table.css" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/add-new.css" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/product.css" />
        <link rel="stylesheet" type="text/css" href="{phrase var='general.host'}/static/css/admin/product_category.css" />
        <!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="http://localhost/magento/skin/adminhtml/default/default/iestyles.css" media="all" />
        <![endif]-->
        <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="http://localhost/magento/skin/adminhtml/default/default/below_ie7.css" media="all" />
        <script type="text/javascript" src="http://localhost/magento/js/lib/ds-sleight.js" defer></script>
        <script type="text/javascript" src="http://localhost/magento/js/varien/iehover-fix.js"></script>
        <![endif]-->
        <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="http://localhost/magento/skin/adminhtml/default/default/ie7.css" media="all" />
        <![endif]-->
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/general.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.min.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.treeview.js"></script>
        <script type="text/javascript" src="{phrase var='general.host'}/static/js/jquery.cookie.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/admin/menu.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.core.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.widget.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.datepicker.js"></script>

        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.button.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.draggable.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.mouse.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.position.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.resizable.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.dialog.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.tooltip.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.ui.tab.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/jquery.form.js"></script>
        <script type='text/javascript' src="{phrase var='general.host'}/static/js/admin/category/index.js"></script>
        <script>
            var $cat = '[\n\
                {"id":1,"parent_id":0,"name":"Danh muc 1"},\n\
                {"id":2,"parent_id":0,"name":"Danh muc 2"},\n\
                {"id":3,"parent_id":0,"name":"Danh muc 3"},\n\
                {"id":4,"parent_id":1,"name":"Danh muc 1-1"},\n\
                {"id":5,"parent_id":1,"name":"Danh muc 1-2"},\n\
                {"id":6,"parent_id":1,"name":"Danh muc 1-3"},\n\
                {"id":7,"parent_id":2,"name":"Danh muc 2-1"},\n\
                {"id":8,"parent_id":3,"name":"Danh muc 3-1"},\n\
                {"id":9,"parent_id":3,"name":"Danh muc 3-2"},\n\
                {"id":10,"parent_id":5,"name":"Danh muc 1-2-1"},\n\
                {"id":11,"parent_id":5,"name":"Danh muc 1-2-2"},\n\
                {"id":12,"parent_id":5,"name":"Danh muc 1-2-3"},\n\
                {"id":13,"parent_id":8,"name":"Danh muc 3-1-1"},\n\
                {"id":14,"parent_id":8,"name":"Danh muc 3-1-2"},\n\
                {"id":15,"parent_id":9,"name":"Danh muc 3-2-1"},\n\
                {"id":15,"parent_id":9,"name":"Danh muc 3-2-2"},\n\
                {"id":15,"parent_id":9,"name":"Danh muc 3-2-3"},\n\
                {"id":15,"parent_id":9,"name":"Danh muc 3-2-4"},\n\
                {"id":15,"parent_id":12,"name":"Danh muc 1-2-3-1"},\n\
                {"id":15,"parent_id":12,"name":"Danh muc 1-2-3-2"},\n\
                {"id":15,"parent_id":12,"name":"Danh muc 1-2-3-3"},\n\
                {"id":15,"parent_id":12,"name":"Danh muc 1-2-3-4"},\n\
                {"id":15,"parent_id":12,"name":"Danh muc 1-2-3-5"}]';

            $cat = JSON.parse($cat);
            
            var $menu = {
                init: function(){},
                
            };
            
            function findIndex($list, $start, $parentId) {
                for (var $i = $start; $i < $list.length; $i++) {
                    if ($list[$i].parent_id == $parentId) {
                        return $i;
                    }
                }

                return -1;
            }
            
            function buildMenu($list, $parentId, $index) {
                var $tree = '';

                for (var $i = $index; $i < $list.length; $i++) {
                    if ($list[$i].parent_id != $parentId) {
                        return $tree;
                    }

                    if ($list[$i].parent_id == $parentId) {
                        $tree += '<li>' + $list[$i].name;
                        var $subIndex = findIndex($list, $i, $list[$i].id);
                        var $subtree = '';
                        if ($subIndex != -1) {
                            $subtree = buildMenu($list, $list[$i].id, $subIndex);
                        }

                        if ($subtree) {
                            $tree += '<ul>' + $subtree + '</ul></li>';
                        }
                        else {
                            $tree += '</li>';
                        }
                    }
                }

                return $tree;
           }
           
           function buildMenu1($list, $parentId, $index, $li) {
                var $tree = '';

                for (var $i = $index; $i < $list.length; $i++) {
                    if ($list[$i].parent_id != $parentId) {
                        return $tree;
                    }

                    if ($list[$i].parent_id == $parentId) {
                        var $name = $list[$i].name;
                        var $subIndex = findIndex($list, $i, $list[$i].id);
                        var $subtree = '';
                        
                        if ($subIndex != -1) {
                            $subtree = buildMenu1($list, $list[$i].id, $subIndex, $li);
                        }
                        
                        $tree +=  $li.replace(/{category}/g, $name);
                        if ($subtree) {
                            $tree =  $tree.replace(/{sub_category}/g, '<ul>' + $subtree + '</ul>');
                        }
                        else {
                            $tree =  $tree.replace(/{sub_category}/g, '');
                        }
                    }
                }

                return $tree;
            }
            
            
           $(function(){
               $_lid = $('#li_category').html().toString();
               $_lid = $_lid.replace('<!--', '').replace('-->', '');
               $mu = '<ul id="product_category_tree" class="filetree treeview-famfamfam">' + buildMenu1($cat, 0, 0, $_lid) + '</ul>';
               $('#test').append($mu);
//               alert($mu);
//               document.write($mu);
//                alert($_lid);
           });
        </script>
        <!--http://codesstore.blogspot.com/2013/07/recursively-print-menu-in-javascript.html-->
        <!--        function getCategory($catData, $prentsID= 0) {
                $catList = "";
                foreach($catData as $aCat) {
                   if ($aCat['parents_id'] == $prentsID) {
                      $catList .= "<li>".$aCat['name'];
                      $catList .= $this->getCategory($catData, $aCat['id']);
                      $catList .= "</li>"
                   }
                }
        //        $catList .= "</ul>";
                return $catList;
            }-->
    </head>
    <body id="store-body">
        <div id="test">
            
        </div>
        <div class="overal">
            <noscript>
                <div class="noscript">
                    <div class="content">
                        <p><strong>JavaScript seems to be disabled in your browser.</strong></p>
                        <p>Please enable javascript browser to use the functionality of website.</p>
                    </div>
                </div>
            </noscript>
            <div class="header">
                <div class="clear"></div>
                <div id="menu" class="navigation-store">
                    <!-- menu start -->
                    <ul id="navigation">
                        <li class=" active  level0"> <a href="#" class="active"><span>Dashboard</span></a>
                        </li>
                        <li class="parent level0"> <a href="#" onclick="return false"><span>Sales</span></a>
                            <ul>
                                <li class="level1"> <a href="#"><span>Orders</span></a>
                                </li>
                                <li class="level1"> <a href="#"><span>Invoices</span></a>
                                </li>
                                <li class="level1"> <a href="#"><span>Shipments</span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="parent level0"> <a href="#" onclick="return false"><span>Product</span></a>
                            <ul>
                                <li class="level1"> <a href="#"><span>Manage Products</span></a>
                                </li>
                                <li class=" level1"> <a href="#"><span>Manage Categories</span></a>
                                </li>

                                <li class=" parent level1"> <a href="#" onclick="return false"><span>Tags</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>All Tags</span></a>
                                        </li>
                                        <li class="last level2"> <a href=""><span>Pending Tags</span></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="parent level0"> <a href="#" onclick="return false"><span>Users</span></a>
                            <ul>
                                <li class=" level1"> <a href="#"><span>Manage User</span></a>
                                </li>
                                <li class="level1"> <a href="#"><span>Manage Catergories</span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="parent level0"> <a href="#" onclick="return false"><span>Newsletter</span></a>
                            <ul>
                                <li class="level1"> <a href="#"><span>Newsletter Templates</span></a>
                                </li>
                                <li class="level1"> <a href="#"><span>Newsletter Queue</span></a>
                                </li>
                                <li class="level1"> <a href="#"><span>Newsletter Subscribers</span></a>
                                </li>
                                <li class="last level1"> <a href="#"><span>Newsletter Problem Reports</span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="parent level0"> <a href="#" onclick="return false"><span>Reports</span></a>
                            <ul>
                                <li class="parent level1"> <a href="#" onclick="return false"><span>Sales</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>Orders</span></a>
                                        </li>
                                        <li class="level2"> <a href="#"><span>Invoiced</span></a>
                                        </li>
                                        <li class="level2"> <a href="#"><span>Shipping</span></a>
                                        </li>
                                        <li class="last level2"> <a href="#"><span>PayPal Settlement Reports</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="parent level1"> <a href="#" onclick="return false"><span>Cart</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>Products in carts</span></a>
                                        </li>
                                        <li class="last level2"> <a href="#"><span>Abandoned carts</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="parent level1"> <a href="#" onclick="return false"><span>Products</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>Bestsellers</span></a>
                                        </li>
                                        <li class="level2"> <a href="#"><span>Products Ordered</span></a>
                                        </li>
                                        <li class="level2"> <a href="#"><span>Most Viewed</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="parent level1"> <a href="#" onclick="return false"><span>Customers</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>New Accounts</span></a>
                                        </li>
                                        <li class="level2"> <a href="#"><span>Customers by orders total</span></a>
                                        </li>
                                        <li class="last level2"> <a href="#"><span>Customers by number of orders</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="parent level1"> <a href="#" onclick="return false"><span>Tags</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>Customers</span></a>
                                        </li>
                                        <li class="level2"> <a href="#"><span>Products</span></a>
                                        </li>
                                        <li class="last level2"> <a href="#"><span>Popular</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="level1"> <a href="#"><span>Search Terms</span></a>
                                </li>
                            </ul>
                        </li>
                        <li class="parent level0"> <a href="#" onclick="return false"><span>System</span></a>
                            <ul>
                                <li class="level1"> <a href="#"><span>My Account</span></a>
                                </li>
                                <li class="parent level1"> <a href="#"><span>Manage Currency</span></a>
                                    <ul>
                                        <li class="level2"> <a href="#"><span>Rates</span></a>
                                        </li>
                                        <li class="last level2"> <a href="#"><span>Symbols</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="level1"> <a href="#"><span>Emails</span></a>
                                </li>
                                <li class="last level1"> <a href="#"><span>Configuration</span></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- menu end -->
                </div>
            </div>

            <div class="info-log">
                <p class="info">
                    Logged in as millionairetai<span class="separator">|</span><a href="#">Log Out</a>
                </p>
            </div>

            <div class="container">
                <div id="main-container">
                    <div id="messages"></div>
                    <div class="header-title">
                        <table cellspacing="0">
                            <tbody>
                                <tr>
                                    <td><h3>Manage Product</h3></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="main-content">
                        <div class="product-category-tree">
                            <div class="tree-actions">
                                <a href="#">Collapse All</a> <span class="separator">|</span> <a href="#">Expand All</a>
                            </div>
                            <ul id="product_category_tree" class="filetree treeview-famfamfam">
                                <li class="closed"><span class="folder"><span class="category-text">Php programming<span class="none-display id">id</span> </span><span class="float-right"><a class="edit" href="#">edit</a> <span class="separator">|</span> <a class="delete" href="#">delete</a></span></span>
                                    <ul>
                                        <li class="closed"><span class="folder"><span class="category-text">f asdf a <span class="none-display id">id</span> </span><span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span>
                                            <ul>
                                                <li class="closed"><span class="folder"><span>fdas fadsf</span><span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></li>
                                            </ul>
                                        </li>
                                        <li class="closed"><span class="folder"><span class="category-text">Folder 2</span> <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span>
                                            <ul>
                                                <li><span class="folder"><span class="category-text">Subfolder 2.1</span> <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span>
                                                    <ul id="folder">
                                                        <li><span class="file">File 2.1.1 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span></li>
                                                        <li><span class="file">File 2.1.2 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span></li>
                                                    </ul>
                                                </li>
                                                <li class="closed"><span class="folder">Subfolder 2.2 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span>
                                                    <ul>
                                                        <li><span class="file">File 2.2.1 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span></li>
                                                        <li><span class="file">File 2.2.2 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="closed"><span class="folder">Folder 3 (closed at start) <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span>
                                            <ul>
                                                <li><span class="file">File 3.1 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span></li>
                                            </ul>
                                        </li>
                                        <li><span class="file">File 4 <span class="float-right"><a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a></span></span></li>
                                    </ul>
                                </li>
                                <li class="closed"><span class="folder">Folder 2</span>
                                    <ul>
                                        <li><span class="folder">Item 2.1</span>
                                            <ul>
                                                <li><span class="file">Item 2.1.1</span></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="product-category-edit">
                            <form  method="post" accept-charset="utf8" id="form_add_category" class="form-user" action="add">
                                <table class="add-new" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td colspan="2">
                                                <span name="category_success_message" id="category_success_message" class="progress-success" title="This field is required."></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="product_category_name">Name <span class="form-required" title="This field is required.">*</span></label>
                                            </td>
                                            <td>
                                                <input id="product_category_name" class="input-text required" id="username" name="category[name]" value="" size="20" maxlength="60" type="text" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="product_category_description">Description <span class="form-required" title="This field is required.">*</span></label>
                                            </td>
                                            <td>
                                                <textarea name="category[description]" class="text-area" id="product_category_description" cols="50" rows="5"></textarea>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="product_category_actived">Actived</label>
                                            </td>
                                            <td>
                                                <div id="status" class="form-radios">
                                                    <input id="status_1" name="category[actived]" value="0" class="input-radio" type="radio" />  <label class="option" for="status_1">Active </label>
                                                    <input id="status_2" name="category[actived]" value="1" checked="checked" class="input-radio" type="radio" />  <label class="option" for="status_2">Deactive </label>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="form-input float-right">
                                    <input type="button" name="add_category" id="add_category" value="Add" class="add" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
        <div class="footer">
            Tutorsell 2013@Sywogroup.com
        </div>

        <div id="dg_confirm_add" class="dialog" title="{pharse var='product.choose_image_product'}">
            Are you sure?
        </div>

        <input type="hidden" value="{pharse var='product.error_message_add'}" name="error_message_add" id="error_message_add"/>
        <input type="hidden" id="token_name" name="token_value" value="<?= $token->name; ?>" />
        <input type="hidden" id="token_value" name="token_value" value="<?= $token->value; ?>" />
        <code class="hidden" id="row_product"><!-- <tr id="row_{product_id}" class="row">
                <td class="center">
                <input type="checkbox" name="delete[{product_id}]" id="{product_id}" class="product-select" />
                </td>
                <td class="product-name" id="product_name_{product_id}"> {product_name} </td>
                <td class = "center"> <span title="{product_status}" class="state {product_status}"></span></td>
                <td class = "center"> <span title="{product_featured}" class="state {product_featured}"></span></td>
                <td> {product_category} </td>
                <td> {product_level} </td>
                <td class = "right"> {product_order} </td>
                <td> {product_date} </td>
                <td> {language} </td>
                <td class="right"> {product_id}</td>
                <td> <a href = "#" id="edit_product_{product_id}" class = "edit-product"> Edit </a></td >
                </tr> -->
        </code>
        <code class="hidden" id="phrase_js"><!-- <?= $phrase_js ?> --></code>
        <code class="hidden" id="li_category">
            <!--
             <li class="closed">
                 <span class="folder">
                     <span class="category-text">{category} </span>
                     <span class="float-right">
                         <a href="#">edit</a> <span class="separator">|</span> <a href="#">delete</a>
                     </span>
                 </span>
                 {sub_category}
             </li>
            -->
        </code>
    </body>
</html>